<template>
  <div>

    <!-- 刷新 -->
    <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
  <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
  <template #pulling="props">
    <img
      class="doge"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
      :style="{ transform: `scale(${props.distance / 80})` }"
    />
  </template>

  <!-- 释放提示 -->
  <template #loosing>
    <img
      class="doge"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
    />
  </template>

  <!-- 加载提示 -->
  <template #loading>
    <img
      class="doge"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"
    />
  </template>
  <p> {{ count }}</p>
</van-pull-refresh>

    <!-- 搜索 -->
    <van-sticky :offset-top="0">
      <van-search
        v-model="value"
        shape="round"
        background="#4fc08d"
        placeholder="请输入搜索关键词"
      />
    </van-sticky>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <van-grid :column-num="4">
          <van-grid-item
            v-for="value in 8"
            :key="value"
            :icon="imglist.img"
            :text="imglist.wz"
          />
        </van-grid>
      </van-swipe-item>
      <van-swipe-item>
        <van-grid :column-num="4">
          <van-grid-item
            v-for="value in 8"
            :key="value"
            :icon="imglist.img"
            :text="imglist.wz"
          />
        </van-grid>
      </van-swipe-item>
    </van-swipe>

    <!-- 更多 -->
    <van-nav-bar
      left-text="一公里商家"
      right-text="更多"
      @click-right="onClickRight"
      to="/dingdan"
    >
    </van-nav-bar>

    <van-grid>
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>
    <!-- 商品排版 -->
    <van-tabs v-model:active="active">
      <van-tab title="商品 1">
        <van-grid :column-num="2">
          <van-grid-item
            v-for="value in 10"
            :key="value"
            icon="photo-o"
            text="文字"
          />
        </van-grid>
      </van-tab>
      <van-tab title="商品 2">内容 2</van-tab>
      <van-tab title="商品 3">内容 3</van-tab>
      <van-tab title="商品 4">内容 4</van-tab>
    </van-tabs>


    <van-skeleton>
  <template #template>
    <div :style="{ display: 'flex', width: '100%' }">
      <van-skeleton-image />
      <div :style="{ flex: 1, marginLeft: '16px' }">
        <van-skeleton-paragraph row-width="60%" />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph />
      </div>
    </div>
  </template>
</van-skeleton>

    <!-- <TabBar :index="0"></TabBar> -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/classlsy">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="cart">购物车</van-tabbar-item>
      <van-tabbar-item
        icon="friends-o
"
        to="my"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>
<script setup>
// import font from '../assets/font/iconfont.css'
import p1 from "../assets/image/1.png";
import p2 from "../assets/image/2.png";
import p3 from "../assets/image/3.png";
import p4 from "../assets/image/4.png";
import p5 from "../assets/image/5.png";
import p6 from "../assets/image/6.png";
import p7 from "../assets/image/7.png";
import p8 from "../assets/image/8.png";
const imglist =
  ({
    img: p1,
    wz: "染头发",
  },
  {
    img: p2,
    wz: "通风管",
  },
  {
    img: p3,
    wz: "大头鬼",
  },
  {
    img: p4,
    wz: "wartime",
  },
  {
    img: p5,
    wz: "的天河",
  },
  {
    img: p6,
    wz: "人生观",
  },
  {
    img: p7,
    wz: "土鲫鱼",
  },
  {
    img: p8,
    wz: "更何况",
  });
// import TabBar from '../tabbar/index.vue'
import { ref } from "vue";
const active = ref(0);

import { useRouter } from "vue-router";
const router = useRouter();
const onClickRight = () => router.push("/dingdan");
</script>
<style lang="scss">
@mixin co(){
    font-size: 20px;
}
@import '../assets/sass/index.scss';
.my-swipe {
  display: flex;
  .my-swipe .van-swipe-item {
    color: #fff;
    @co;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
}


</style>